<template>
  <view v-if="shenheStatus == 0" class="s_c_container">
    <view class="s_c_box">
      <view class="box_top">
        <view
          style="
            font-size: 65rpx;
            font-weight: bold;
            text-align: center;
            line-height: 120rpx;
          "
        >
          ￥{{ detail.sub_price || '0.00' }}
        </view>
        <view style="text-align: center; font-size: 30rpx">
          {{ detail.min_price_desc || '' }}
        </view>
      </view>
      <view class="box_bottom">
        <view class="bottom_title">
          {{ $t('coupon.validity') }}
        </view>
        <view class="bottom_value">
          {{ detail.begin_time || '' }} ~ {{ detail.end_time || '' }}
        </view>
        <view class="bottom_title">
          {{ $t('coupon.rules') }}
        </view>
        <view class="bottom_value">
          {{
            detail.appoint_type == 1
              ? $t('coupon.cat')
              : detail.appoint_type == 2
              ? $t('coupon.goods')
              : ''
          }}
        </view>
        <view class="bottom_title">
          {{ $t('coupon.explain') }}
        </view>
        <view class="bottom_value">
          {{ detail.rule || '' }}
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: {
    Shenhe,
  },
  data() {
    return {
      detail: {},
    };
  },
  filters: {},
  onLoad(opt) {
    uni.setNavigationBarTitle({
      title: this.$t('title.myCouponDetail'),
    });
    this.getDetailById(opt.id);
  },
  methods: {
    async getDetailById(id) {
      try {
        const res = await this.$allrequest.coupon.couponDetail({
          coupon_id: '',
          user_conpon_id: id,
        });
        if (res.code == 0) {
          this.detail = res.data.list;
        } else {
          this.$utils.toast(res.msg);
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
  },
};
</script>

<style scoped lang="scss">
.s_c_container {
  height: 100vh;
  background-color: rgb(255, 123, 51);
  padding: 30rpx;
  .s_c_box {
    background-color: #fff;
    width: 100%;
    border-radius: 20rpx;
    position: relative;
    .box_top {
      padding: 40rpx 0;
      text-align: center;
      border-bottom: 1px dashed #cccccc;
    }
    .box_bottom {
      font-size: 32rpx;
      padding: 40rpx;
      .bottom_title {
        line-height: 50rpx;
        color: #808080;
      }
      .bottom_value {
        line-height: 70rpx;
      }
    }
    &::before {
      content: '';
      position: absolute;
      width: 50rpx;
      height: 50rpx;
      background-color: rgb(255, 123, 51);
      border-radius: 25rpx;
      left: 0;
      top: 31%;
      transform: translateX(-50%);
    }
    &::after {
      content: '';
      position: absolute;
      width: 50rpx;
      height: 50rpx;
      background-color: rgb(255, 123, 51);
      border-radius: 25rpx;
      right: 0;
      top: 31%;
      transform: translateX(50%);
    }
  }
}
</style>
